<template>
	<div>
		<div class="table">
			<el-table
				:data="apply"
				:header-cell-style="{ backgroundColor: '#00B4D422', color: '#000' }"
				:row-style="tableRowClassName">
				<el-table-column prop="stuName" label="姓名" />
				<el-table-column prop="stuId" label="学号" />
				<el-table-column prop="dorNumber" label="寝室号" />
				<el-table-column prop="buildId" label="楼栋" />
				<el-table-column prop="holReason" label="留校原因">
					<template #default="{ row }">
						<p class="holReason" @click="showDetial(row)">{{ row.holReason }}</p>
					</template>
				</el-table-column>
				<el-table-column prop="holTime" label="留校申请日期">
					<template #default="{ row }">
						{{ new Date(row.holTime).toLocaleDateString() }}
					</template>
				</el-table-column>
				<el-table-column prop="holStatus" label="假期去向">
					<template #default="{ row }">
						<span :style="{ color: row.holStatus == '离校' ? 'red' : '#95d475' }">{{ row.holStatus }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="holApply" label="申请进度" />
				<el-table-column label="操作">
					<template #default="{ row }">
						<el-button link class="ok" @click="handleClick(row)">同意</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<!-- 显示申请内容详情 -->
		<el-dialog v-model="showDetialDialog" width="300" :show-close="false">
			{{ applyReason.holReason }}
			<template #footer>
				<el-button @click="showDetialDialog = false" link type="primary">关闭</el-button>
			</template>
		</el-dialog>

		<!-- 显示同意申请对话框-->
		<el-dialog v-model="showAgreeDialog" width="300" :show-close="false">
			<template #header>
				<h2 class="title">同意申请</h2>
			</template>
			<div :style="{ 'text-indent': '2rem' }">
				确定通过 <span :style="{ color: 'Highlight' }">{{ agreeTarget.stuName }}</span> 的留校申请吗？
			</div>
			<template #footer>
				<el-button @click="handleAgreeApply" link type="primary">同意</el-button>
				<el-button @click="showAgreeDialog = false" link type="danger">取消</el-button>
			</template>
		</el-dialog>

		<!-- 分页 -->
		<el-row class="pagination">
			<el-pagination
				v-model:current-page="currentPage"
				v-model:page-size="pageSize"
				:page-sizes="pageSizes"
				small="small"
				:background="true"
				layout="total, sizes, prev, pager, next"
				:total="total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange" />
		</el-row>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getHolApplying, passHolApplyBegin } from '@/utils/axios/domiRequests'
import { getHolInfoCount } from '@/utils/axios/getTotal'

const currentPage = ref(1)
const pageSize = ref(10)
const pageSizes = reactive([10, 20, 30])

defineProps(['apply',"total"])
const $emit=defineEmits(['change'])

// 同意的假期申请
const agreeTarget = ref()




// 显示申请理由详情
const applyReason = ref('')

const showDetialDialog = ref(false)
const showAgreeDialog = ref(false)

// 处理点击同意按钮
const handleClick = (val) => {
	agreeTarget.value = val
	showAgreeDialog.value = val
}

// 同意申请
const handleAgreeApply = async () => {
	agreeTarget.value.houId=Number.parseInt(agreeTarget.value.holId)
	await passHolApplyBegin(agreeTarget.value)
	init().then(()=>showAgreeDialog.value=false)
}


const handleSizeChange = async (val) => {
	let { data } = await getHolApplying({ currentPage: currentPage.value, pageSize: val })
	
	$emit("change",{data})
}
const handleCurrentChange = async (val) => {
	let { data } = await getHolApplying({ currentPage: val, pageSize: pageSize.value })
	$emit("change",{data})
}
// 查看申请理由详情
const showDetial = (val) => {
	applyReason.value = val
	showDetialDialog.value = true
}

// 添加表格样式
const tableRowClassName = ({ row, rowIndex }) => {
	if (rowIndex % 2 === 1) {
		return { backgroundColor: '#00B4D411' }
	}
	return ''
}
async function init() {
	let { data } = await getHolApplying({ currentPage: currentPage.value, pageSize: pageSize.value })
	let res = await getHolInfoCount()
	$emit("change",{data,tota:res.data})
}

onMounted(async () => {
	await init()
})
</script>

<style scoped lang="scss">
.title {
	color: rgb(0, 202, 237);
	font-size: 20px;
	margin: 0;
}

.table {
	$colorOk: rgba(124, 184, 12, 0.933);
	$colorRefuse: rgb(160, 53, 43);
	.ok {
		color: $colorOk;
	}
	.refuse {
		color: $colorRefuse;
	}
}
.btn {
	background: rgb(0, 202, 237);
	color: #ffff;
}

.header {
	margin-bottom: 20px;
}
.holReason {
	width: 150px;
	text-wrap: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}


</style>
